.search-bar{
    position: absolute;
    width: 100%;
    height: px2rem(40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: px2rem(14px);
    .bar-location{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: px2rem(20px);
        border-radius: px2rem(13px);
        background-color: rgba(0,0,0,.33);
        height: px2rem(28px);
        width: px2rem(92px);
    }
    .location-icon{
        display: inline-block;
        width: px2rem(15px);
        height: px2rem(20px);
        margin-left: px2rem(8px);
        background-image: url('./img/locationIcon.png');
        background-size: cover;
    }
    .location-text{
        position: relative;
        display: inline-block;
        font-size: px2rem(14px);
        color: #fff;

        margin-left: px2rem(8px);
        margin-right: px2rem(19px);
        &::after{
            content: '';
            display: block;
            position: absolute;
            width: px2rem(14px);
            height: px2rem(14px);
            background-image: url('./img/arrowIcon.png');
            background-size: cover;
            right: px2rem(-15px);
            top: px2rem(-1px);
        }
    };
    .search-btn{
        width: px2rem(170px);
        height: px2rem(30px);
        background-color: #fff;
        border-radius: px2rem(20px);
    };
    .place-holder{
        position: relative;
        font-size: px2rem(14px);
        color: #999;
        height: 100%;
        line-height: px2rem(30px);
        margin-left: px2rem(28px);
        &::before{
            content:'';
            display: block;
            position: absolute;
            width: px2rem(14px);
            height: px2rem(14px);
            background-image: url('./img/searchIcon.png');
            background-size: cover;
            top: px2rem(7px);
            left: px2rem(-20px);
        }
    }
}